<!--
* @author wn
* @date 2022/06/17 14:52:37
* @description: 封转通用的按钮--》封装一个通用按钮组件，
* 有大、中、小、超小四种尺寸，有默认、主要、次要、灰色四种类型。
* 提供  尺寸  颜色 可选
* 内容  由插槽提供
!-->
<template>
	<button class="xtx-button ellipsis" :class="[size, type]">
		<slot />
	</button>
</template>
<script>
export default {
	name: 'XtxButton',
	props: {
		size: {
			type: String,
			default: 'middle',
		},
		type: {
			type: String,
			default: 'default',
		},
	},
}
</script>
<style scoped lang="less">
.xtx-button {
	// 各个浏览器的button丑且样式不一致
	// button就和div一样，什么样式都没有了，但还能保留button的语意
	// 三行样式
	appearance: none;
	border: none;
	outline: none;
	// ==================
	border: 1px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	background: #fff;
}
.large {
	width: 240px;
	height: 50px;
	font-size: 16px;
}
.middle {
	width: 180px;
	height: 50px;
	font-size: 16px;
}
.small {
	width: 100px;
	height: 32px;
	font-size: 14px;
}
.mini {
	width: 60px;
	height: 32px;
	font-size: 14px;
}
.default {
	border-color: #e4e4e4;
	color: #666;
}
.primary {
	border-color: @xtxColor;
	background: @xtxColor;
	color: #fff;
}
.plain {
	border-color: @xtxColor;
	background: lighten(@xtxColor, 50%);
	color: @xtxColor;
}
.gray {
	border-color: #ccc;
	background: #ccc;
	color: #fff;
}
</style>
